<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                display: flex;
                height: 100vh;
            }
            .left{
                width: 200px;
                background-color: skyblue;
            }
            .right{
                flex: 1;
                background-color: pink;
            }
            .right iframe{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="left">
            <h1>导航</h1>
            <h2><button type="button">国内新闻</button></h2>
            <h2><button type="button">国外新闻</button></h2>
            <h2><button type="button">娱乐新闻</button></h2>
            <h2><button type="button">体育新闻</button></h2>
            <h2><button class="links" type="button" data-src="http://www.taobao.com">淘宝</button></h2>
        </div>
        <div class="right">
            <iframe src="news1.html"></iframe>
        </div>
        
        <script type="text/javascript">
                var btns = document.querySelectorAll("h2 button");
                var iframe = document.querySelector("iframe");
                btns.forEach(function(item,index){
                     item.onclick = function () {
                        iframe.setAttribute("src","news"+(index+1)+".html");
                    };
                });
                var links = document.querySelector(".links");
                links.onclick = function(event){
                   var Https = event.target.dataset.src;
                   iframe.setAttribute("src",Https);
                }


        </script>
    </body>
</html>